//todo 受控组件和非受控组件只能用于表单控件
//todo 它们都是一个作用，就是得到表单控件里面输入的内容

//todo 受控组件就是我们自己去控制input的值
//todo 受控组件就是有value属性和onChange事件的组件

import React, { Component } from "react";

class App extends Component {
  state = {
    value: "abc",
  };
  handleChange(e) {
    this.setState({
      value: e.target.value,
    });
  }
  handleClick() {
    console.log(this.state.value);
  }
  render() {
    return (
      <>
        <h2>受控组件</h2>
        <input
          type="text"
          value={this.state.value}
          onChange={this.handleChange.bind(this)}
        />
        <button onClick={this.handleClick.bind(this)}>btn</button>
      </>
    );
  }
}

export default App;
